import {
    WeaErrorPage,
    WeaTools
} from 'ecCom'
import {
    WeaTop,
    WeaRightMenu
} from 'ecCom';
import {
    Form,
    Input,
    Button,
    Row,
    Col,
    Alert,
    message,
    Icon,
    Checkbox
} from 'antd';
import { inject, observer } from 'mobx-react';
import {toJS} from 'mobx';

import {
    InteTable
} from './InteTable.js'
const FormItem = Form.Item;
const createForm = Form.create;

// import Immutable from 'immutable'
// const is = Immutable.is;
// const fromJS = Immutable.fromJS;
import stores from '../stores/index'

@inject('demoTestStore')
@observer
class Test extends React.Component {
  constructor(props) {
    super(props);
  }

  componentDidMount() {
    //一些初始化请求
    const {demoTestStore,params} = this.props;
    demoTestStore.test(params.path)//修改传输参数为动态路由值
  }

  render() {
    const formItemLayout = {
      labelCol: {
        span: 6
      },
      wrapperCol: {
        span: 14
      },
    };
    const {
      getFieldProps,
      getFieldValue
    } = this.props.form;
    const {
      data,
      selectMap,
      flag
    } = toJS(this.props.demoTestStore.state_1);
    let alldata = data.map((datas, i) => {
      return <InteTable ecId={`${this && this.props && this.props.ecId || ''}_InteTable@57m9ms@Test${i}`} key={i}  datas={datas} getFieldProps={getFieldProps} selectMap={selectMap} />
    })
    const dropMenuDatas = [{
      key: 1,
      icon: <i className='icon-search' />,
      content: '保存'
    }];
    const btns = [
      (<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@7maky3@$Submit`} type="glost" disabled={false} onClick={()=>this.handleSubmit()}>保存</Button>)
    ];
  
    return (
      <WeaRightMenu ecId={`${this && this.props && this.props.ecId || ''}_WeaRightMenu@eixe8u`} datas={dropMenuDatas} onClick={this.onDropMenuClick.bind(this)}>
        <WeaTop ecId={`${this && this.props && this.props.ecId || ''}_WeaTop@ycn1s4`}
            title={'账号设置'}
            icon={<i className='icon-search' />}
            iconBgcolor='#55D2D4'
            buttons={btns}
            buttonSpace={10}
            showDropIcon={true}
            dropMenuDatas={dropMenuDatas}
        >
        <Form ecId={`${this && this.props && this.props.ecId || ''}_Form@64yuir`} horizontal >
            {alldata}
        </Form>
            </WeaTop>
      </WeaRightMenu>

    );
  }

  onDropMenuClick(key) {
    const {
      demoTestStore
    } = this.props;
    let fields = toJS(demoTestStore.state_1.fields)
    if (key == '1') {
      demoTestStore.saveTest({
        "JsonStr": JSON.stringify(fields)
      });
    }
  }
  handleSubmit() {
      const {
        demoTestStore
      } = this.props;
    let fields = toJS(demoTestStore.state_1.fields)
    demoTestStore.saveTest({
          "JsonStr": JSON.stringify(fields)
      });
  }


}
    //组件检错机制
class MyErrorHandler extends React.Component {
    render() {
        const hasErrorMsg = this.props.error && this.props.error !== "";
        return (
            <WeaErrorPage ecId={`${this && this.props && this.props.ecId || ''}_WeaErrorPage@wcnzd6`} msg={ hasErrorMsg ? this.props.error : "对不起，该页面异常，请联系管理员！" }/>
        );
    }
}

Test = WeaTools.tryCatch(React, MyErrorHandler, {
    error: ""
})(Test);
//表单双向绑定数据
Test = createForm({
    onFieldsChange(props, fields) {
      stores.demoTestStore.setFields(fields);
    },
    mapPropsToFields(props) {
      let state_1 = toJS(stores.demoTestStore.state_1);
      return state_1;
    }
})(Test);


export default Test;